@import '~@/assets/css/mixins';

.data_dev {
  display: flex;
  display: flex;
  width: 100%;
  height: 100%;
  background-color: rgb(255 255 255 / 39%);

  .data_dev_left {
    z-index: 3;
    float: left;
    height: 100%;
    transform: translateX(0%);
    transition: 0.4s;

    /* Firefox 4 */
    transition: 0.4s;

    /* Safari 和 Chrome */
    transition: 0.4s;

    .react-resizable {
      float: left;
      height: 100%;
    }

    .menu_xq {
      position: relative;
      float: left;
      width: 249px;
      height: 100%;

      .function_m_illustrate {
        width: 100%;
        height: 100%;
        padding: 15px 20px;
        overflow-y: auto;
        color: rgb(255 255 255 / 65%);
        font-weight: normal;
        font-size: 14px;
        background-color: rgb(255 255 255 / 39%);
        border-right: 1px solid;
        border-right-color: rgb(255 255 255 / 10%);

        .illustrate_title {
          color: @blue;
        }

        .center {
          padding-left: 10px;

          .title {
            margin-top: 10px;
            margin-bottom: 3px;
            color: #0084f1;
            font-size: 13px;
            letter-spacing: 1px;
          }

          :global {
            ul {
              margin-bottom: 5px;

              li {
                font-size: 12px;
                letter-spacing: 1px;
                text-indent: 24px;

                p {
                  word-wrap: break-word;
                }
              }
            }
          }
        }
      }

      :global {
        .icon-cuohao {
          position: absolute;
          top: 15px;
          right: 15px;
          color: rgb(255 255 255 / 65%);
          font-size: 12px;
          cursor: pointer;
        }
      }
    }
  }

  .data_dev_left_show {
    width: 0;
    overflow: auto;
    transform: translateX(-100%);
    transition: 0.4s;

    /* Firefox 4 */
    transition: 0.4s;

    /* Safari 和 Chrome */
    transition: 0.4s;
  }

  .data_dev_right {
    position: relative;
    flex: 1;
    height: 100%;

    .data-sheet {
      .data-sheet-nav {
        border-left: 0;
        // solid: #19191c;
      }
    }

    .ant-tabs-tab-prev-icon,
    .ant-tabs-tab-next-icon {
      color: #fff;
    }

    .editor_box {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      overflow: hidden;

      .mock {
        position: absolute;
        top: 82px;
        right: 0;
        height: calc(100% - 117px);
        overflow-y: auto;
        color: #fff;
        background: #32323a;
        transition: 0.4s;

        /* Firefox 4 */
        transition: 0.4s;

        /* Safari 和 Chrome */
        transition: 0.4s;

        .header {
          width: 100%;
          height: 35px;
          font-size: 12px;
          line-height: 30px;
          text-indent: 30px;
          border-bottom: 1px solid #000;

          span {
            cursor: pointer;
          }
        }

        .center {
          width: 100%;
          height: 100%;
          overflow-y: auto;
        }
      }

      .editor_box_tabs {
        height: 100%;

        :global {
          .ant-tabs-content {
            height: 100%;
          }

          .ant-tabs-nav {
            margin-bottom: 0;
          }

          .ant-tabs-tab {
            border-bottom: 0 !important;
          }

          .ant-tabs-nav .ant-tabs-tab+.ant-tabs-tab {
            margin-left: 6px !important;
          }

          .ant-tabs-nav .ant-tabs-tab {
            background: linear-gradient(138deg, #f3f5f8 0%, #fff 100%) !important;
            border: 2px solid #fff !important;
            border-top-left-radius: 4px !important;
            border-top-right-radius: 4px !important;
            box-shadow: 8px 8px 20px rgb(55 99 170 / 12%);
          }

          .ant-tabs-nav .ant-tabs-tab-active {
            background: #fff !important;
          }

          .ant-tabs-tab {
            min-width: 96px;
          }
        }
      }
    }

    .none_box {
      width: 100%;
      height: 100%;
      background-color: rgb(255 255 255 / 39%);

      .explain {
        padding-top: 130px;
        text-align: center;

        .empty_page_img {
          position: relative;
          width: 267px;
          height: 280px;
        }

        .empty_page_text {
          text-align: center;
          margin-top: 32px;
          color: rgb(0 0 0 / 85%);
          font-weight: 400;
          font-size: 36px;
          line-height: 49px;
        }

        .empty_page_content {
          margin-top: 24px;
          color: rgb(0 0 0 / 65%);
          font-weight: 400;
          font-size: 14px;
          line-height: 22px;
        }

        .empty_page_button {
          margin-top: 24px;
        }
      }
    }

    .icon-unsave {
      position: absolute;
      top: 9px;
      right: 19px;
      display: block;
      width: 11px;
      height: 11px;
      font-size: 12px;
      background-color: #6e7685;
      border-radius: 50%;
    }

    .ant-tabs-extra-content {
      display: none;
    }

    .ant-tabs-nav-container {
      font-size: 12px;
    }

    .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
      height: 32px;
      margin-top: 10px;
      color: rgb(255 255 255 / 45%);
      line-height: 30px;
      background-color: rgb(255 255 255 / 6%);
      border-color: transparent transparent #2c2c34;
      // border-width: 0 10px 30px 10px;
      border-style: none solid solid;
    }

    .ant-tabs-nav-wrap {
      width: 100%;
      height: 55px;

      /* no */
    }

    .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab .ant-tabs-close-x {
      margin-right: 0;
      margin-left: 10px;
      color: rgb(255 255 255 / 45%);
      font-size: 10px;
    }

    .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
      padding-bottom: 0;
      border-color: transparent transparent #282830;

      .ant-tabs-close-x {}
    }

    .ant-tabs {
      width: 100%;
      height: 100%;
    }

    .ant-tabs-bar {
      margin: 0;
      border-bottom: 1px solid;
      border-bottom-color: #1f1f1f;
    }

    .ant-tabs .ant-tabs-top-content,
    .ant-tabs .ant-tabs-bottom-content,
    .ant-tabs-tabpane .ant-tabs-tabpane-active {
      width: 100%;
      height: 100%;
    }

    .ant-tabs-tab:hover {
      .icon {
        display: none;
      }
    }
  }
}

.tabpane_icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  color: rgb(0 132 255 / 100%);
  background-color: rgb(0 132 255 / 10%);
  border-radius: 2px;

  :global {
    .anticon {
      margin-right: 0 !important;
    }
  }
}
